import React, { Component } from 'react';
import { Row, Card, Col, Rate } from 'antd';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';
import './Comprehensive.less';

/**
 * 综合评价
 */
class Comprehensive extends Component {
  static displayName = 'Comprehensive';

  constructor(props) {
    // console.log("Home",props);
    super(props);
    this.state = {
      machineCode: localStorage.getItem('TOKEN') ? localStorage.getItem('TOKEN') : '',
      chartId: 'RDChart',
      numbers: {},
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { chartId } = this.state;
    dispatch({
      type: 'comprehensive/getCP',
      payload: {
        chartId,
      },
    });
  }

  render() {
    const { desc_info, complex_score, current_score, industry_rank } = this.props;
    return (
      <div className="home-page" style={{ paddingTop: '0', borderTop: '1px solid #f1f1f1' }}>
        <Card className="demo-row">
          <Col span={8}>
            <div className="demo-col-inset">
              <div style={{ display: 'inline-flex' }}>
                <div className="left-card">
                  <img src={require('./images/zhl.png')} />
                </div>
                <div className="right-card">
                  <div className="small-title">综合评分</div>
                  <div className="number">{complex_score}</div>
                  <div>
                    <Rate value={Number(complex_score) / 20} disabled />
                  </div>
                </div>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="demo-col-inset">
              <div style={{ display: 'inline-flex' }}>
                <div className="left-card">
                  <img src={require('./images/zhr.png')} />
                </div>
                <div className="right-card">
                  <div className="small-title">本期分数</div>
                  <div className="number">{current_score}</div>
                  <div>
                    <Rate value={Number(current_score) / 20} disabled />
                  </div>
                </div>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="demo-col-inset">
              <div style={{ display: 'inline-flex' }}>
                <div className="left-card">
                  <img src={require('./images/hy.png')} />
                </div>
                <div className="right-card">
                  <div className="small-title">行业排名</div>
                  <div className="number">{industry_rank}</div>
                </div>
              </div>
            </div>
          </Col>
        </Card>

        <Card style={{ margin: '20px 0', borderRadius: '0' }}>
          <div className="title">
            <div className="kk" />
            传统财务得分
          </div>
          <div className="left-chart-box">
            <div
              id={this.state.chartId}
              style={{ width: '100%', height: '386px', marginTop: '20px' }}
            />
            {/* <Loading style={{display: 'block'}} visible={this.state.chart_ready} shape="fusion-reactor" color="#fff"></Loading> */}
          </div>
        </Card>

        <Card style={{ margin: '20px 0', borderRadius: '0' }}>
          <div className="title">
            <div className="kk" />
            指标解释
          </div>
          <div className="desc_info">{desc_info}</div>
        </Card>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  desc_info: state.comprehensive.desc_info,
  complex_score: state.comprehensive.complex_score, // 综合分数
  current_score: state.comprehensive.current_score, // 本期分数
  industry_rank: state.comprehensive.industry_rank, // 行业排名
});
export default connect(mapStateToProps)(Comprehensive);
